<template>
    <div class="newcomerGift">
        <van-divider :style="{ color: 'black', borderColor: 'black', padding: '0 7.1875rem' }">
            新人专享礼
        </van-divider>
        <van-row>
            <van-col span="8" @click="onClickNew" style="
    margin-right: 10px;
">
                <h4>新人专享礼包</h4>
                <img src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" />

            </van-col>
            <van-col span="8">
                <van-col span="6" @click="onClickFuli">
                    <h4>福利社</h4>
                    <p>今日特价</p>
                    <img src="../images/fuli.jpg" />
                </van-col>
                <van-col span="6" @click="onClickNewTeam">
                    <h4>新人拼团</h4>
                    <p><van-tag color="#cbb693" text-color="">1元起包邮</van-tag></p>
                    <img src="../images/pintuan.jpg" alt="" />


                </van-col>
            </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
    methods:{
        onClickNew(){
            this.$router.push('/new')
        },
        onClickFuli(){
            this.$router.push('/ere')
        },
        onClickNewTeam(){
            this.$router.push('/team')
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
/* .newcomerGift .van-divider{
    padding:0 
} */
.newcomerGift .van-row {
    display: flex;
    justify-content: center;
}

.newcomerGift .van-row .van-col--8 {
    width: 10.75rem;
    height: 13.625rem;
}

.newcomerGift .van-col--8:first-child {
    background: #f9e9cf;
    padding: .9375rem .9375rem;
}

.newcomerGift .van-col--8:first-child h4 {
    margin-bottom: 1.9375rem;
}

.newcomerGift .van-col--8:first-child img {
    width: 8.125rem;
    height: 8.125rem;

}

.newcomerGift .van-col--8:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.newcomerGift .van-col--8 .van-col--6 {
    width: 100%;
    height: 6.75rem;
    padding: .9375rem .9375rem;
    position: relative;
}

.newcomerGift .van-col--8 .van-col--6 img {
    position: absolute;
    top: .9375rem;
    right: .9375rem
}

.newcomerGift .van-col--8 .van-col--6 p {
    font-size: .6875rem;
    color: #888685;
}

.newcomerGift .van-col--6:first-child {
    background: #fbe2d3;
}

.newcomerGift .van-col--6:last-child {
    background: #fdecc2;
}

.newcomerGift .van-row--justify-space-between {
    flex-direction: column;
}
</style>